<script setup lang="ts">
import numberScroll from '@/components/number-scroll/index.vue'
import {processNumber} from "@/utils";
import {useAnStore} from "@/stores";
import {ref} from 'vue'

const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  }
});

const sign = ref(0)

setInterval(()=>{
  sign.value += 1
},2000)

const anStore  = useAnStore()
</script>

<template>
<div class="mt-[45px] h-[100%] pb-[15px] flex flex-col justify-between items-center bg-l overflow-visible">
<!--  top-->
  <div class="w-[762px] h-[134px] flex justify-between items-center px-[57px] relative z-[30] bg1">
    <div class="flex flex-col items-center flex-1">
      <div class="text-[#FB2D19] text-[22px] font-medium ff-YouSheBiaoTiHei">
        <span class="text-[32px]"><number-scroll :number="processNumber(item['all']?.['call'])[0]"/></span>
        <span v-if="processNumber(item['all']?.['call'])[1]">.<number-scroll :number="processNumber(item['all']?.['call'])[1]"/>w</span>
      </div>
      <div class="text-[#1A1A1A] text-[16px]">外呼总量</div>
    </div>
<!--    <div class="flex flex-col items-center">-->
<!--      <div class="text-[#FB2D19] text-[22px] font-medium ff-YouSheBiaoTiHei">-->
<!--        <span class="text-[32px]">{{ processNumber(item['all']?.['wx'])[0] }}</span>-->
<!--        <span v-if="processNumber(item['all']?.['wx'])[1]">.{{ processNumber(item['all']?.['wx'])[1] }}w</span>-->
<!--      </div>-->
<!--      <div class="text-[#1A1A1A] text-[16px]">加微总量</div>-->
<!--    </div>-->
<!--    <div class="flex flex-col items-center">-->
<!--      <div class="text-[#FB2D19] text-[22px] font-medium ff-YouSheBiaoTiHei">-->
<!--        <span class="text-[32px]">{{ processNumber(item['all']?.['visit'])[0] }}</span>-->
<!--        <span v-if="processNumber(item['all']?.['visit'])[1]">.{{ processNumber(item['all']?.['visit'])[1] }}w</span>-->
<!--      </div>-->
<!--      <div class="text-[#1A1A1A] text-[16px]">到访总量</div>-->
<!--    </div>-->
    <div class="flex flex-col items-center flex-[2]">
      <div class="text-[#FB2D19] text-[22px] font-medium ff-YouSheBiaoTiHei">
        <span class="text-[32px]"><number-scroll :number="processNumber(item['all']?.['sign'])[0]"/></span>
        <span v-if="processNumber(item['all']?.['sign'])[1]">.<number-scroll :number="processNumber(item['all']?.['sign'])[1]"/>w</span>
      </div>
      <div class="text-[#1A1A1A] text-[16px]">签约总量</div>
    </div>
    <div class="flex flex-col items-center flex-1">
      <div class="text-[#FB2D19] text-[22px] font-medium ff-YouSheBiaoTiHei">
        <span class="text-[32px]"><number-scroll :number="processNumber(item['all']?.['over'])[0]"/></span>
        <span v-if="processNumber(item['all']?.['over'])[1]">.<number-scroll :number="processNumber(item['all']?.['over'])[1]"/>w</span>
      </div>
      <div class="text-[#1A1A1A] text-[16px]">完结总量</div>
    </div>
  </div>
<!--  center-->
  <div class="w-[811px] h-[930px] absolute top-[91px] ring-container overflow-visible">
    <img class="w-[884px] h-[884px] ring1" src="@/assets/img/dt/bg_guangquan.png">
    <img class="w-[100%] h-[100%] absolute z-[2]" src="@/assets/img/img_ditu.png">
    <div class="w-[350px] h-[247px] absolute top-[403px] left-[116px] z-20">
      <div class="w-[96px] h-[92px] text-[#1A1A1A] text-center text-[22px] csbg absolute left-[120px] top-[40px] ff-PangMenZhengDaoBiaoTiTiMianFeiBan" :class="{
        csbgAct: anStore.anIndex == 0
      }">
        <div>杭州市</div>
      </div>
      <img class="w-[100%] h-[100%]" :style="{
        opacity: anStore.anIndex == 0 ? 1 : 0
      }" @mouseover="anStore.setIndex(0),anStore.end()" @mouseout="anStore.start()" src="@/assets/img/dt/img_hz.png">
    </div>
    <div class="w-[197px] h-[189px] absolute top-[451px] left-[345px] z-20">
      <div class="w-[96px] h-[92px] text-[#1A1A1A] text-center text-[22px] csbg absolute left-[60px] top-[20px] ff-PangMenZhengDaoBiaoTiTiMianFeiBan" :class="{
        csbgAct: anStore.anIndex == 1
      }">
        <div>绍兴市</div>
      </div>
      <img class="w-[100%] h-[100%]" :style="{
        opacity: anStore.anIndex == 1 ? 1 : 0
      }" @mouseover="anStore.setIndex(1),anStore.end()" @mouseout="anStore.start()" src="@/assets/img/dt/img_sx.png">
    </div>
    <div class="w-[145px] h-[138px] absolute top-[324px] left-[404px] z-20">
      <div class="w-[96px] h-[92px] text-[#1A1A1A] text-center text-[22px] csbg absolute left-[20px] top-[0] ff-PangMenZhengDaoBiaoTiTiMianFeiBan" :class="{
        csbgAct: anStore.anIndex == 2
      }">
        <div>嘉兴市</div>
      </div>
      <img class="w-[100%] h-[100%]" :style="{
        opacity: anStore.anIndex == 2 ? 1 : 0
      }" @mouseover="anStore.setIndex(2),anStore.end()" @mouseout="anStore.start()" src="@/assets/img/dt/img_jx.png">
    </div>
    <div class="w-[206px] h-[292px] absolute top-[416px] left-[489px] z-20">
      <div class="w-[96px] h-[92px] text-[#1A1A1A] text-center text-[22px] csbg absolute left-[50px] top-[60px] ff-PangMenZhengDaoBiaoTiTiMianFeiBan" :class="{
        csbgAct: anStore.anIndex == 3
      }">
        <div>宁波市</div>
      </div>
      <img class="w-[100%] h-[100%]" :style="{
        opacity: anStore.anIndex == 3 ? 3 : 0
      }" @mouseover="anStore.setIndex(3),anStore.end()" @mouseout="anStore.start()" src="@/assets/img/dt/img_nb.png">
    </div>
    <div class="w-[229px] h-[205px] absolute top-[558px] left-[247px] z-20">
      <div class="w-[96px] h-[92px] text-[#1A1A1A] text-center text-[22px] csbg absolute left-[50px] top-[30px] ff-PangMenZhengDaoBiaoTiTiMianFeiBan" :class="{
        csbgAct: anStore.anIndex == 4
      }">
        <div>金华市</div>
      </div>
      <img class="w-[100%] h-[100%]" :style="{
        opacity: anStore.anIndex == 4 ? 1 : 0
      }" @mouseover="anStore.setIndex(4),anStore.end()" @mouseout="anStore.start()" src="@/assets/img/dt/img_jh.png">
    </div>
    <div class="w-[161px] h-[158px] absolute top-[162px] left-[289px] z-20">
      <div class="w-[96px] h-[92px] text-[#1A1A1A] text-center text-[22px] csbg absolute left-[0px] top-[30px] ff-PangMenZhengDaoBiaoTiTiMianFeiBan" :class="{
        csbgAct: anStore.anIndex == 5
      }">
        <div>无锡市</div>
      </div>
      <img class="w-[100%] h-[100%]" :style="{
        opacity: anStore.anIndex == 5 ? 1 : 0
      }" @mouseover="anStore.setIndex(5),anStore.end()" @mouseout="anStore.start()" src="@/assets/img/dt/img_wx.png">
    </div>
    <div class="w-[130px] h-[247px] absolute top-[53px] left-[118px] z-20">
      <div class="w-[96px] h-[92px] text-[#1A1A1A] text-center text-[22px] csbg absolute left-[10px] top-[40px] ff-PangMenZhengDaoBiaoTiTiMianFeiBan" :class="{
        csbgAct: anStore.anIndex == 6
      }">
        <div>南京市</div>
      </div>
      <img class="w-[100%] h-[100%]" :style="{
        opacity: anStore.anIndex == 6 ? 1 : 0
      }" @mouseover="anStore.setIndex(6),anStore.end()" @mouseout="anStore.start()" src="@/assets/img/dt/img_nj.png">
    </div>
  </div>
<!--  bottom-->
  <div class="w-[762px] h-[134px] flex justify-between items-center px-[57px] relative z-[30] bg2">
    <div class="flex flex-col items-center flex-1">
      <div class="text-[#FB2D19] text-[22px] font-medium ff-YouSheBiaoTiHei">
        <span class="text-[32px]"><number-scroll :number="processNumber(item['all']?.['room_num'])[0]"/></span>
        <span v-if="processNumber(item['all']?.['room_num'])[1]">.<number-scroll :number="processNumber(item['all']?.['room_num'])[1]"/>w</span>
      </div>
      <div class="text-[#1A1A1A] text-[16px]">施工中房源数</div>
    </div>
    <div class="flex flex-col items-center flex-[2]">
      <div class="text-[#FB2D19] text-[22px] font-medium ff-YouSheBiaoTiHei">
        <span class="text-[32px]"><number-scroll :number="processNumber(item['all']?.['all_price'])[0]"/></span>
        <span v-if="processNumber(item['all']?.['all_price'])[1]">.<number-scroll :number="processNumber(item['all']?.['all_price'])[1]"/>w</span>
      </div>
      <div class="text-[#1A1A1A] text-[16px]">签约总金额</div>
    </div>
    <div class="flex flex-col items-center flex-1">
      <div class="text-[#FB2D19] text-[22px] font-medium ff-YouSheBiaoTiHei">
        <span class="text-[32px]"><number-scroll :number="processNumber(item['all']?.['all_price'] - item['all']?.['pay_over'])[0]"/></span>
        <span v-if="processNumber(item['all']?.['all_price'] - item['all']?.['pay_over'])[1]">.<number-scroll :number="processNumber(item['all']?.['all_price'] - item['all']?.['pay_over'])[1]"/>w</span>
      </div>
      <div class="text-[#1A1A1A] text-[16px]">未交付总金额</div>
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">
.bg1{
  background: url("@/assets/img/bg-top.png") 0 0 / 100% 100% no-repeat;
}
.bg2{
  background: url("@/assets/img/bg-bottom.png") 0 0 / 100% 100% no-repeat;
}
.csbg{
  padding-top: 2px;
  background: url("@/assets/img/dt/ic_cswx.png") 0 0 /100% 100% no-repeat;
  transition: all .2s;
}
.csbgAct{
  color: #fff;
  background: url("@/assets/img/dt/ic_csxz.png") 0 0 /100% 100% no-repeat;
  transform: scale(1.1);
  transition: all .2s;
}

.ring-container {
  position: absolute;
  //perspective: 900px; /* 设置3D透视效果 */
}

.ring1 {
  position: absolute;
  top: 0;
  transform-style: preserve-3d; /* 保持3D效果 */
  transform: rotateX(45deg);
  transform-origin: center; /* 设置变换原点为中心 */
  animation: rotate 20s linear infinite;
}

.absolute{
  position: absolute;
  overflow: visible;
}

@keyframes rotate {
  0% {
    transform:rotateX(45deg) rotateY(5deg) rotateZ(0deg);
  }
  100% {
    transform:rotateX(45deg) rotateY(5deg) rotateZ(360deg);
  }
}
</style>
